<template>
  <el-dialog
    title="企微号自动管理设置"
    :visible.sync="$attrs.visableIf"
    @close="handleCloseDialog"
    width="700px">
    <el-form ref="form" :rules="rules" :model="form" label-width="130px">
      <el-form-item label="添加频繁自动恢复:" prop="addFreqAutoRecover">
        <el-switch v-model="form.addFreqAutoRecover"></el-switch>
        <div class="tips">企微号被标记为添加频繁后，会自动停用。若开启此开关，自动停用的企微号24小时后将自动启用；不影响手动停用/启用</div>
      </el-form-item>
      <el-form-item label="消息频繁自动停用:" prop="msgFreqAutoRecover">
        <el-switch v-model="form.msgFreqAutoRecover"></el-switch>
        <div class="tips">若开启此开关，检测到企微号消息发送频繁后，会自动停用。24小时后自动重新启用；不影响手动停用/启用</div>
      </el-form-item>
      <el-form-item label="低通过率自动停用:" prop="lowFreqAutoStop">
        <el-switch v-model="form.lowFreqAutoStop"></el-switch>
      </el-form-item>
      <div class="lowFreqAutoStop" v-if="form.lowFreqAutoStop">
        企微号每日打招呼
        <el-input v-model="form.lowFreqAutoStopHelloTimes" type="number" size="small" style="width: 80px"></el-input>
        次后，通过率小于
        <el-input v-model="form.lowFreqAutoStopAcceptRate" type="number" size="small" :min="0" :max="100" style="width: 80px"></el-input>
        %，自动停用，下个自然日自动开启
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCloseDialog">取 消</el-button>
      <el-button type="primary" @click="onSubmit('form')">保存设置</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {reqAccountMngConfig, addAccountMngConfig, editAccountMngConfig} from '@/api/addFriend/index'
import {mapGetters} from 'vuex';

export default {
  data() {
    return {
      form: {
        corpId: null,
        addFreqAutoRecover: false,// 添加频繁自动恢复
        msgFreqAutoRecover: false,// 消息频繁自动恢复
        lowFreqAutoStop: false,//低通过率自动停用
        lowFreqAutoStopHelloTimes: null,//打招呼次数
        lowFreqAutoStopAcceptRate: null,//打招呼频率
      },
      dialogType: 'add',
      rules: {},
    };
  },
  computed: {
    // 使用对象展开运算符将此getter映射到局部计算属性
    ...mapGetters([
      'enterpriseId' // 假设这是你想要监听的getter的名字
    ]),
  },
  props: ['visible'],
  created() {
    console.log('enterpriseId', this.enterpriseId);
    this.getAccountMngConfig();
  },
  watch: {
    'form.lowFreqAutoStop'(val) {
      if (!val) {
        this.form.lowFreqAutoStopHelloTimes = null;//打招呼次数
        this.form.lowFreqAutoStopAcceptRate = null;//打招呼频率
      }
    }
  },
  methods: {
    getAccountMngConfig() {
      reqAccountMngConfig(this.enterpriseId).then(res => {
        console.log('获取配置----', res);
        if (!res.data) {
          this.dialogType = 'add'
        } else {
          this.dialogType = 'edit';
          this.form = res.data;
          this.form.addFreqAutoRecover = this.form.addFreqAutoRecover == 1 ? true : false;
          this.form.msgFreqAutoRecover = this.form.msgFreqAutoRecover == 1 ? true : false;
          this.form.lowFreqAutoStop = this.form.lowFreqAutoStop == 1 ? true : false;
          delete this.form.corpName;
          delete this.form.sysUserId;
        }
      })
    },
    onSubmit(formName) {
      //提交的代码
      if (this.form.lowFreqAutoStop) {
        if (!this.form.lowFreqAutoStopHelloTimes || !this.form.lowFreqAutoStopAcceptRate) {
          this.$message.warning('请填写完整的信息！');
          return;
        }
      }
      if (this.form.lowFreqAutoStopAcceptRate < 0 || this.form.lowFreqAutoStopAcceptRate > 100) {
        this.$message.warning('通过率在0%~100%，请正确填写！');
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.addFreqAutoRecover = this.form.addFreqAutoRecover ? 1 : 0;
          this.form.msgFreqAutoRecover = this.form.msgFreqAutoRecover ? 1 : 0;
          this.form.lowFreqAutoStop = this.form.lowFreqAutoStop ? 1 : 0;
          let url = '';
          if (this.dialogType == 'add') {
            //添加
            this.form.corpId = this.enterpriseId;
            url = addAccountMngConfig;
          } else {
            //编辑
            url = editAccountMngConfig;
          }
          url(this.form).then(res => {
            this.$modal.msgSuccess('操作成功！');
            this.handleCloseDialog()//关闭窗口
          })

        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false)
    }
  },
};
</script>
<style lang="scss" scoped>
.tips {
  margin-left: -130px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.45);
}

::v-deep .el-form {
  .el-form-item {
    border-bottom: 1px solid #eee;
    padding-bottom: 22px;
  }
}

.lowFreqAutoStop {
  background: #f5f5f5;
  border: 1px solid #e9e9e9;
  padding: 12px;
}
</style>
